<template>
	<el-container>
		<el-aside>
			<el-container>
				<el-main class="nopadding">
					<el-tabs tab-position="top" style="padding-left: 10px;padding-right: 10px;" v-model="groupId" @tab-change="tabChange">
						<el-tab-pane label="我的文件" name="myfilelist" :tabActiveName="true">
							<el-header>
								<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
							</el-header>
							<el-main class="nopadding">
								<el-tree ref="fileFolder" class="menu" node-key="folderId" :data="fileFolderList" :props="groupsProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
										 :filter-node-method="groupFilterNode" @node-click="groupClick">
									<template #default="{node, data}">
										<span class="custom-tree-node">
											<span class="label">{{ node.label }}</span>
											<span class="code">{{ data.code }}</span>
											<span class="do">
												<el-button-group>
													<el-button icon="el-icon-edit" size="small" @click.stop="personalFolderEdit(data)"></el-button>
													<el-button icon="el-icon-delete" size="small" @click.stop="personalFolderDel(node, data)"></el-button>
												</el-button-group>
											</span>
										</span>
									</template>
								</el-tree>
							</el-main>
						</el-tab-pane>
						<el-tab-pane label="他人共享" name="sharefilelist">
							<el-empty v-if="shareFolderList.length==0" description="暂无共享文件" :image-size="50"></el-empty>
							<el-row :gutter="0" class="box">
								<el-col :span="24" v-for="item in shareFolderList" :key="item.folderId" style="cursor: pointer" @click="showShareFileList(item)">
									<div class="icon-box">
										<el-icon><el-icon-folder-opened/></el-icon><div style="margin-left:15px;font-size:14px;font-weight: 600;position:relative;top:-8px;display: inline-block">{{ item.folderName }}</div>
										<div style="display: inline-block;float: right;">
											<div style="display: inline-block;"><el-avatar :src="item.avatar" size="small"></el-avatar></div>
											<div style="display: inline-block;float: right;line-height: 27px;">{{item.createUserName}}</div>
										</div>
									</div>
								</el-col>
							</el-row>

						</el-tab-pane>
					</el-tabs>
				</el-main>
				<el-footer style="height:51px;" v-if="groupId=='myfilelist'">
					<el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;" @click="addFileFolder">添加目录</el-button>
				</el-footer>
			</el-container>
		</el-aside>
			<component :ref="groupId" :is="isComponent" @changefoldersuccess="updateDate"/>
	</el-container>
	<filefloderdialog v-if="dialog.save" ref="fileFolderDialog" @success="handleFolderSuccess" @closed="dialog.save=false"></filefloderdialog>
</template>

<script>
import myfilelist from './myfilelist'
import sharefilelist from './sharefilelist'
import filefloderdialog from "./filefloderdialog";
export default {
	name: 'Personal File',
	components: {
		myfilelist,
		sharefilelist,
		filefloderdialog
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			groupId: "myfilelist",
			isComponent: "myfilelist",
			showGrouploading: false,
			groupFilterText: '',
			fileFolderList: [],
			shareFolderList:[],
			groupsProps: {
				label: "folderName",
				value: "folderId"
			},
			rules: {},
			params:{},
			fileType:'',
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.fileFolder.filter(val);
		}
	},
	mounted() {
		this.getPersonalFileFolderGroup();
		if(this.fileType==="")
		{
			this.groupClick(this.params);
		}else{
			this.getSharePersonalFileFolder();
			this.showShareFileList(this.params);
		}
	},
	created() {
		this.fileType=this.$route.params.fileType!=null?this.$route.params.fileType:'';
		if(this.fileType==="")
		{
			let folderId=this.$route.params.folderId!=null?this.$route.params.folderId:'';
			let folderName =this.$route.params.folderName!=null?this.$route.params.folderName:'';
			this.params ={folderId:folderId,folderName:folderName};
		}else{
			this.groupId="sharefilelist";
			this.isComponent="sharefilelist";
			let folderId=this.$route.params.folderId!=null?this.$route.params.folderId:'';
			let folderName =this.$route.params.folderName!=null?this.$route.params.folderName:'';
			let editRole=this.$route.params.editRole!=null?this.$route.params.editRole:'';
			this.params = {folderId:folderId,folderName:folderName,editRole:editRole};

		}
	},
	methods: {
		showShareFileList(item)
		{
			this.$refs.sharefilelist.initSharePersonalFileList(item)
		},
		async getSharePersonalFileFolder(){
			var res = await this.$API.file.personalFile.getSharePersonalFileFolder.get();
			if(res.code==200)
			{
				if(res.data){
					this.shareFolderList = res.data;
				}
			}
		},
		updateDate(){
			this.getPersonalFileFolderGroup();
		},
		tabChange(name) {
			this.groupId = name;
			this.isComponent = name;
			if(name==="sharefilelist")
			{
				this.getSharePersonalFileFolder();
			}
		},
		//加载树数据
		async getPersonalFileFolderGroup() {
			this.showGrouploading = true;
			var res = await this.$API.file.personalFile.getPersonalFolderTree.get();
			this.showGrouploading = false;
			this.fileFolderList = res.data;
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.folderName.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			this.$refs.myfilelist.setHistory(data.folderId,data.folderName);
		},

		addFileFolder() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.fileFolderDialog.open()
			})
		},
		personalFolderEdit(data) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.fileFolderDialog.open("edit").setData(data)
			})
		},
		personalFolderDel(node, data) {
			this.$confirm(`确定删除 ${data.folderName} 项吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				var res = await this.$API.file.personalFile.deletePersonalFileFolder.post({folderId: data.folderId});
				if (res.code == 200) {
					this.$refs.fileFolder.remove(data.folderId)
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}

			}).catch(() => {
			})
		},
		async handleFolderSuccess(data) {
			var res = await this.$API.file.personalFile.getPersonalFolderTree.get();
			if (res.code == 200) {
				this.fileFolderList = res.data;
			}
		},
	}
}
</script>

<style scoped>
.custom-tree-node {
	/*display: flex;*/
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}
.box {border-top: 1px solid #eee;border-left: 1px solid #eee;}
.icon-box {height:46px;background: #fff;border-bottom: 1px solid #eee;border-right: 1px solid #eee;color: #666;padding:10px;}
.icon-box i {font-size: 26px;transition: color .15s linear;}
.icon-box p {color: #999;mtransition: color .15s linear;}
.icon-box:hover i, .icon-box:hover p {color: #5cb6ff;}

.dark .box {border-color: var(--el-border-color-light);}
.dark .icon-box {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
</style>

